* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  ul {
    list-style: none;
    /* 取消列表样式 */
  }

/* 下拉选择框 */
.select {
    position: relative;
    display: inline-block; /* 将元素设置为行内块级元素，使其既能像行内元素一样水平排列，又能设置宽高等块级元素属性 */
    margin: 0 5px;
    /* 处理空格:不会超出容器宽度而发生换行 */
    white-space: nowrap; /* 防止文本换行，使内容在一行内显示 */
    color: #666;
  }

/* 下拉选择框左边的标题 */
.select .title {
    display: flex;
    justify-content: space-between;
    min-width: 150px;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
  }

/* 下拉选择框及标题的禁用状态 */
.select.disabled {
    color: #ccc;
  }
  .select.disabled .title {
    cursor: not-allowed;
  }

/* 下拉选择框右边的箭头图标 */
.select .title .iconfont {
    font-size: 10px;
    transition: 0.5s;
  }
  .select.expand .iconfont {
    transform: rotate(180deg);
  }
  
/* 下拉框选择器下的列表区域 */
.select  .options {
    position: absolute;
    top: 50px;
  
    display: grid;
    /* 设置网格布局的流动方向为列，使内容按列排列 */
    grid-auto-flow: column;
    /* 设置网格行模板，自动适应内容，每行高度为20px */
    grid-template-rows: repeat(auto-fit, 20px);
    row-gap: 6px;
    column-gap: 26px;
    justify-items: left;
  
    max-height: 300px;
    min-width: 100%;
    padding: 10px;
    background: #fff;
  
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  
    /* 刚开始是隐藏,并且缩放为0 */
    /* 初始状态完全透明 */
    opacity: 0;
    /* 初始状态在Y轴方向上缩放为0，即完全折叠 */
    transform: scaleY(0);
    /* 设置过渡效果，所有变化将在0.5秒内完成 */
    transition: 0.5s;
    /* 设置变换原点在中心点上方10px处，使下拉效果更自然 */
    transform-origin: center -10px;
  }

/* 下拉框选择器下的列表区域的展开状态 */
.select.expand .options {
    opacity: 1;
    /* 将下拉列表在Y轴方向上缩放为1，即恢复到原始大小，实现展开效果 */
    transform: scaleY(1);
  }

/* 下拉框选择器下的列表区域上面的小凸起 */
.select .options::before {
  
    content: "";
    position: absolute;
    left: 70px;
    top: -6px;
    width: 10px;
    height: 10px;
    
    background: #fff;
    border: 1px solid #ccc;
    /* 将元素旋转45度，使其呈现菱形效果 */
    transform: rotate(45deg);
    /* 移除底部边框，使旋转后的元素与上方内容无缝衔接 */
    border-bottom: none;
    /* 移除右侧边框，使旋转后的元素与左侧内容无缝衔接 */
    border-right: none;
  }

/* 下拉框选择器下的列表区域  */
.select .options li {
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 5px;
  }
  .select .options li.active {
    background: #eec05a;
  }
  